<template>
    <!-- 常规登入 -->
    <div class="common-login" >
        <el-form-item el-form-item label="用户名" prop="username">
            <el-input class="usn" type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
            <el-input v-model="ruleForm.captcha" type="text" class="captcha" ref="captcha" @keydown.native.enter="submitForm('ruleForm')"></el-input>

            <span class="captcha-svg" v-loading="loading">
                <i v-html="captcha" @click="getCaptcha()"></i>
            </span>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>

        <el-form-item>
            <div class="sms">
                <!-- <i class="iconfont icon-shouji1"></i> -->
                 <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-iphone"></use>
                </svg>
                <a class="el-link" @click="$emit('changeSmsType')" href="javascript:;" style=" font-size:16px">切换短信登录</a>
            </div>
        </el-form-item>
    </div>
</template>

<script>
    // export default{
    //     props:['ruleForm'],
    // }
    
    //表单验证的思路 当前组件的loginFrom的变化，同步到父组件的loginForm就可以了
    import * as api from "@/api/users"
    export default {
        mounted(){
            // api.getCaptcha()
            // .then(res => {
            //     console.log(res);
            // })
        },
        created () {
            this.getCaptcha();
        },
    data() {
        return {
            isSmsLogin:true,//控制是否切换短信登录
            captcha:"",//验证码
            loading:false,//
            ruleForm: {
                username: "",
                password: "",
                captcha: ""
            },
            }
        },
        //通过watch监听ruleForm的变化
        watch:{
            ruleForm:{
                handler(newVal){
                    // console.log(newVal);
                    this.$emit('syncLoginForm',newVal);
                },
                deep: true,//
            }
        },
        methods:{
            submitForm(formName){
                console.log(formName)               
                // console.log(this.$refs)               
                this.$emit('submit')
            },
            //封装一个获取验证码的方法
            getCaptcha(){
                //打开加载动画
                this.loading=true,
                api.getCaptcha()
                .then(res => {
                    // console.log(res);
                    this.captcha = res.data.img
                    //关掉加载动画
                    this.loading=false
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    // .icon-shouji1{
    //     font-size: 20px;
    //     vertical-align: middle;

    // }
    .sms {
        margin-left: -15px !important;
        width: 250px !important;
        position: relative;

    }
    .common-login{
        position: relative;
    }
    .captcha-svg{
        position:absolute;
        top: -4px;
        right: 0;
        cursor: pointer;
    }
    .el-link{
        color:#fff
    }

</style>